<template>
  <div class="rz-chart-Mian rz-chart-Mianm2">
    <div class="rz-chart-mianList not-mian">
      <div class="rz-chart-title">
        <span class="text"></span>
        <span class="">年龄分布</span>
      </div>
      <div class="rz-chart-top-mian">
        <el-form>
          <el-form-item class="ds">
            <el-select v-model="leftCompany" placeholder="请选择公司">
              <el-option
                v-for="item in leftCompanyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="ds">
            <el-select v-model="leftBranch" placeholder="请选择部门">
              <el-option
                v-for="item in leftBranchList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="ds">
            <el-date-picker
              v-model="leftTime"
              type="month"
              placeholder="选择年月"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div
        id="rz-chartMian-left"
        ref="chartLeft"
        style="width: 100%; height: 237px; background: #fff"
      ></div>
    </div>

    <div class="rz-chart-mianList">
      <div class="rz-chart-title">
        <span class="text"></span>
        <span class="">性别比</span>
      </div>
      <div class="rz-chart-top-mian">
        <el-form>
          <el-form-item class="ds">
            <el-select v-model="rightCompany" placeholder="请选择公司">
              <el-option
                v-for="item in rightCompanyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="ds">
            <el-select v-model="rightBranch" placeholder="请选择部门">
              <el-option
                v-for="item in rightBranchList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="ds">
            <el-date-picker
              v-model="rightTime"
              type="month"
              placeholder="选择年月"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div
        id="rz-chartMian-right"
        ref="chartRight"
        style="width: 100%; height: 237px; background: #fff"
      ></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { color } from "echarts/lib/export";
export default {
  data() {
    return {
      leftCompanyList: [
        {
          value: "科技公司",
          label: "科技公司",
        },
      ], //公司列表
      rightCompanyList: [
        {
          value: "右边公司",
          label: "右边公司",
        },
      ], //公司列表
      leftCompany: "", //柱形图公司内容
      rightCompany: "", //折线图公司内容
      leftBranch: "", //柱形图部门内容
      rightBranch: "", //折线图部门内容
      leftBranchList: [
        {
          value: "左边部门",
          label: "左边部门",
        },
      ], //部门列表
      rightBranchList: [
        {
          value: "右边部门",
          label: "右边部门",
        },
      ], //部门列表
      leftTime: "", //人员异动年月
      rightTime: "", //学历分布年月
    };
  },
  mounted() {
    this.chartLeft();
    this.chartRight();
  },
  methods: {
    chartLeft() {
      this.$nextTick((_) => {
        let chart_dv = this.$refs.chartLeft;
        if (!chart_dv) {
          return;
        }

        // let myChart = echarts.init(document.getElementById("rz-chartMian-left"));
        let myChart = echarts.init(chart_dv);
        let option = {
          tooltip: {},
          dataset: {
            source: [],
          },
          grid: {
            //柱状图位置
            top: "25%",
            left: "2%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: ["18-25岁", "26-35岁", "36-45岁", "46-55岁", ">55岁"],
            axisLine: {
              //x轴样式
              show: true,
              lineStyle: {
                width: 0,
                // color:'#fff',
                type: "solid",
              },
            },
            axisTick: {
              //显示刻标
              show: false,
            },
          },
          yAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            splitNumber: 5, //y轴总共提示几个文字点
            splitLine: {
              //格线样式
              lineStyle: {
                color: "#eee",
              },
            },
            axisTick: {
              //显示刻标
              show: false,
            },
            axisLine: {
              //坐标轴轴线相关设置。
              show: false,
            },
            axisLabel: {
              margin: 20,
            },
          },
          color: ["#7A6BB0", "#AD8EEF", "#F15F5F", "#32B5E8"],
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
            {
              type: "bar",
              barWidth: 16,
              barGap: 2,
              itemStyle: {
                normal: {
                  barBorderRadius: [8, 8, 8, 8],
                  //每个柱子的颜色即为colors数组里的每一项，如果柱子数目多于colors的长度，则柱子颜色循环使用该数组
                  color: function (params) {
                    var colorList = [
                      "#32B5E8",
                      "#F8A885",
                      "#4EC985",
                      "#7A6BB0",
                      "#3D6FB7",
                      "#F1605F",
                    ];
                    return colorList[params.dataIndex];
                  },
                },
              },
              data: [15, 20, 24, 24, 10],
              label: {
                normal: {
                  show: true, //是否显示
                  position: "top", //文字位置
                  formatter: "{c}人", //c后面加单位
                },
              },
            },
          ],
        };
        window.addEventListener("resize", function () {
          myChart.resize();
        }); //放大缩小自适应
        myChart.setOption(option);
      });
    },
    chartRight() {
      // let myChart = echarts.init(document.getElementById("rz-chartMian-right"));
      //解决dom问题
      this.$nextTick((_) => {
        let bar_dv = this.$refs.chartRight;
        if (!bar_dv) {
          return;
        }
        let myChart = echarts.init(bar_dv);
        let option = {
          tooltip: {
            trigger: "item",
          },
          color: ["#F1605F", "#3D6FB7"],
          legend: {
            orient: "vertical",
            // left: 'left',
            bottom: "30%",
            right: "16%",
          },
          series: [
            {
              type: "pie",
              radius: "60%",
              center: ['40%', '60%'],
              data: [
                { value: 735, name: "女性" },
                { value: 1048, name: "男性" },
              ],
              labelLine:{
                normal:{
                  show:true,
                  length2 : 10,
                  lineStyle:{
                  }
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        window.addEventListener("resize", function () {
          myChart.resize();
        }); //放大缩小自适应
        myChart.setOption(option);
      });
    },
  },
};
</script>

<style>
</style>